<template>
  <div class="mui-content">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <img @click="fn.back()" class="mui-action-back back-btn" src="../../../../static/images/back.png">
        <div class="header-search flex-center">审批申请</div>
      </div>
    </header>
    <div class="message-tab mui-segmented-control flex-justify-start">
      <a :class="{'mui-active': type=='approve'}" @click="jump('approve')" class="mui-control-item" href="javascript:void(0)">
        <img v-if="type=='approve'" src="../../../../static/images/shenpishenqing_on.png">
        <img v-if="type!=='approve'"  src="../../../../static/images/shenpishenqing.png">
        <span v-if="applyData.total" class="mui-badge mui-badge-danger">{{applyData.total || 0}}</span>审批申请</a>
      <span style="color: #eee;">|</span>
      <a :class="{'mui-active': type=='approveHistory'}" @click="jump('approveHistory')"  class="mui-control-item" href="javascript:void(0)">
        <img v-if="type=='approve'" src="../../../../static/images/shenpijilu.png">
        <img v-if="type!=='approve'" src="../../../../static/images/shenpijilu_on.png">
        审批记录</a>
    </div>
    <div class="mui-page-content mui-pages">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll mui-pages">
          <!-- --------审批申请---------------start -->
          <div v-if="type=='approve'" id="work-message" class="mui-control-content mui-active">
            <ul class="work-message-lists mine-lists">
              <li class="mine-lists-content work-message-lists flex-between-center" style="margin-bottom: 10px;" v-for="(data,index) in applyData.list" :key="data.key" @click="goApply(data.key)">
                <h4 class="mine-lists-title">{{data.desc}}</h4>
                <span class="mine-lists-money">{{data.total}}</span>
                <span class="mui-icon mui-icon-arrowright"></span>
              </li>
            </ul>
            <div class="text-center no-data" v-if="applyData.list.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
          </div>
          <!-- --------审批申请---------------end -->
          <!-- --------审批记录---------------start -->
          <div v-if="type=='approveHistory'" id="system-message" class="mui-control-content mui-active">
            <ul class="work-message-lists mine-lists">
              <li class="mine-lists-content work-message-lists flex-between-center" style="margin-bottom: 10px;" v-for="(data,index) in recordData.list" :key="data.key" @click="goRecord(data.key)">
                <h4 class="mine-lists-title">{{data.desc}}</h4>
                <span class="mine-lists-money">{{data.total}}</span>
                <span class="mui-icon mui-icon-arrowright"></span>
              </li>
            </ul>
            <div class="text-center no-data" v-if="recordData.list.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
          </div>
          <!-- --------审批记录---------------end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        type: 'approve', // approve:审批申请，approveHistory:审批记录
        applyData: {},
        recordData: {}
      }
    },
    created () {
      this.type = this.$route.params.type || 'approve'
      this.loadData()
      this.loadHoveApprovalList()
    },
    methods: {
      jump (type) {
        this.$router.replace({path: '/approve/' + type})
      },
      goApply (name) {
        if (name === 'org-life') {
          let flag = '1'
          this.$router.push({path: `/organizationApply/1`})
        } else if (name === 'party-member-study') {
          this.$router.push({name: 'patchApply'})
        } else if (name === 'no-answer') {
          this.$router.push({path: `/noanswerApply/1`})
        }
      },
      goRecord (name) {
        if (name === 'org-life') {
          let flag = '2'
          this.$router.push({path: `/organizationApply/2`})
        } else if (name === 'party-member-study') {
          this.$router.push({name: 'patchApprove'})
        } else if (name === 'no-answer') {
          this.$router.push({path: `/noanswerApply/2`})
        }
      },
      loadData () {
        // 请求数据
        loginService.applyList().then(res => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.applyData = res.data
        })
      },
      // 已经审批的列表
      loadHoveApprovalList () {
        loginService.recordList().then(res => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.recordData = res.data
        })
      }
    },
    watch: {
      $route (to, from) {
        this.type = to.params.type
      }
    }
  }
</script>

<style scoped lang="">

</style>
